<!DOCTYPE html>
<html lang="en" xmlns:th="https://www.thymeleaf.org">
<th:block th:fragment="links">
<!--    <th:block th:replace="~{modules/themeSettingVariable :: themeSetting}" />-->
<!--    <th:block th:if="${htmlType == 'post'}">-->
<!--    <th:block th:replace="~{modules/postMetaVariable :: postSetting}" />-->
<!--    </th:block>-->
  <link rel="shortcut icon" size="32x32" th:href="${site.favicon}">
  <link rel="canonical" th:href="${site.url}">
  <link rel="apple-touch-icon" sizes="180x180" th:href="${site.favicon}">
  <th:block th:replace="~{modules/key_css :: key_css}" />
  <th:block th:if="${theme.config.theme.enable_loading_bar}">
<!-- 加载条 -->
    <link rel="stylesheet" th:href="@{/assets/lib/nprogress/nprogress.min.css}">
    <style th:inline="text">
      #nprogress .bar {
        height: [[${theme.config.theme.loading_bar_height ?: '3px'}]];
        background: var(--loading-bar);
      }
      #nprogress .peg {
        display: none;
      }
    </style>
    <script th:src="@{/assets/lib/nprogress/nprogress.min.js}"></script>
  </th:block>
  <link rel="preload stylesheet" as="style" th:href="@{/assets/css/min/normalize.min.css?v={version}(version=${theme.spec.version})}">
  <link rel="preload stylesheet" as="style" th:href="@{/assets/lib/font-awesome/css/font-awesome.min.css}">
  <link rel="preload stylesheet" as="style" href="//at.alicdn.com/t/font_2788564_crkap1ed9j5.css">
  <link rel="preload stylesheet" as="style" href="//at.alicdn.com/t/c/font_4198339_jcoci5bgy7.css">
  <th:block th:if="${theme.config.custom.iconfont != '' and theme.config.custom.iconfont != null}">
    <link rel="stylesheet" th:href="${theme.config.custom.iconfont}">
  </th:block>
  <link rel="preload stylesheet" as="style" th:href="@{/assets/css/min/theme.min.css?v={version}(version=${theme.spec.version})}">
    <style th:inline="text">
        #Joe .joe_container {
            max-width: [[${theme.config.basic.content_max_width+'px'}]] !important;
        }

        @media (max-width: 1360px) {
            #Joe .joe_container{
                max-width: initial !important;
            }
        }
        @media (max-width: 768px) {
            #Joe .joe_container{
                max-width: initial !important;
            }
        }
    </style>
    <link rel="stylesheet" th:href="@{/assets/lib/qmsg/qmsg.css}">
    <link rel="preload stylesheet" as="style" th:href="@{/assets/lib/animate/animate.min.css}">
    <th:block th:if="${htmlType == 'index'} and ${theme.config.carousel.enable_banner}">
        <link rel="stylesheet" th:href="@{/assets/lib/swiper/swiper-bundle.min.css}">
    </th:block>
    <th:block th:if="${htmlType == 'post' or tmlType == 'journals' or tmlType == 'sheet'}">
        <link rel="preload stylesheet" as="style" th:href="@{/assets/lib/prism/prism.min.css}">
        <link rel="preload stylesheet" as="style" th:href="@{/assets/lib/prism/themes}+'/prism-'+${theme.config.code_block.code_theme}+'.css'">
    </th:block>
    <link rel="preload stylesheet" as="style" th:href="@{/assets/css/min/global.min.css?v={version}(version=${theme.spec.version})}">
    <th:block th:if="${htmlType == 'index'}">
        <link rel="preload stylesheet" as="style" th:href="@{/assets/css/min/index.min.css?v={version}(version=${theme.spec.version})}">
    </th:block>
    <th:block th:if="${htmlType == 'post'}">
        <link rel="preload stylesheet" as="style" th:href="@{/assets/css/min/post.min.css?v={version}(version=${theme.spec.version})}">
    </th:block>
    <th:block th:if="${htmlType == 'journals'}">
        <link rel="preload stylesheet" as="style" th:href="@{/assets/css/min/journals.min.css?v={version}(version=${theme.spec.version})}">
    </th:block>
    <th:block th:if="${htmlType == 'archives'}">
        <link rel="preload stylesheet" as="style" th:href="@{/assets/css/min/archives.min.css?v={version}(version=${theme.spec.version})}">
    </th:block>
    <th:block th:if="${htmlType == 'photos'}">
        <link rel="stylesheet" th:href="@{/assets/lib/justifiedGallery/justifiedGallery.min.css}">
        <link rel="preload stylesheet" as="style" th:href="@{/assets/css/min/photos.min.css?v={version}(version=${theme.spec.version})}">
    </th:block>
    <link rel="preload stylesheet" as="style" th:href="@{/assets/css/min/responsive.min.css?v={version}(version=${theme.spec.version})}">
    <link rel="stylesheet" th:href="@{/assets/lib/fancybox/jquery.fancybox.min.css}">
    <link
            rel="stylesheet"
            href="https://unpkg.com/@waline/client@v2/dist/waline.css"
    />
    <th:block th:if="${ttheme.config.other.enable_clean_mode != true} and ${theme.config.theme.cursor_skin != 'off'}">
        <link rel="stylesheet" th:href="@{/assets/cursor/style/min}+'/'+${theme.config.theme.cursor_skin}+'.min.css'">
    </th:block>
    <link rel="preload stylesheet" as="style" th:href="@{/assets/css/min/beauty.min.css?v={version}(version=${theme.spec.version})}">
    <style th:if="${theme.config.custom.custom_css != null and theme.config.custom.custom_css != ''}"
            th:utext="${theme.config.custom.custom_css}">

    </style>

    <style>
        .sjs-default{
            position: relative;
            padding: 0;
            margin: 0;
            opacity: 0;
            transition: height .2s ease-out, opacity .2s ease-out .2s;
        }
        [data-sjsel]{
            opacity: 0;
            position: absolute;
            top: 0;
            left: 0;
            transition: transform .2s ease-out;
        }
        .evan-friends .sub-text {
            word-break: break-all;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .evan-friends .evan-f-left {
            width: 100px;
            min-width: 100px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.5s ease-in-out;
        }

        .evan-friends .evan-f-left .f-avatar {
            width: 70px;
            height: 70px;
            box-sizing: border-box;
            border-radius: 50%;
            overflow: hidden;
            transition: all 0.2s ease-in-out;
            border: 2px solid #ffffff;
            background-color: #ffffff;
        }

        .evan-f-left .f-avatar .avatar {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            margin: 0;
            object-fit: cover;
        }

        .evan-friends .evan-f-right {
            flex-grow: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            box-sizing: border-box;
        }

        .evan-friends .joe_detail__friends-item .contain {
            border-radius: 12px;
        }

        .evan-friends .joe_detail__friends-item .contain .title::after {
            display: none;
        }

        .evan-friends .title {
            max-width: 70%;
            min-width: 70%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            font-size: 1.3em;
            color: var(--fcolor);
            margin-top: 12px;
        }

        .evan-friends .title .icon {
            position: absolute;
            top: -1.6em;
            right: calc(50% - 1.5em);
            width: 1em;
            min-width: 1em;
            height: 1em;
            min-height: 1em;
            overflow: hidden;
            font-size: 20px;
            border-radius: 50%;
            border: 1px solid #ffffff;
            background-color: #ffffff;
        }

        .evan-friends .content {
            margin-top: 10px !important;
            font-size: 0.93em;
            color: var(--main);
        }

        .evan-friends .joe_detail__friends-item .contain .content .desc {
            -webkit-line-clamp: 1;
        }

        .evan-friends .contain {
            display: flex;
            flex-direction: column;
            align-items: center;
            position: relative;
            border: 1px solid var(--fcolor);
            transition: all .2s ease-in-out;
        }

        .evan-friends .contain:hover {
            transform: translateY(-3px);
            box-shadow: 0px 0px 20px -5px rgb(158 158 158 / 20%);
        }

        .evan-friends .contain::before {
            content: "";
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            right: 0;
            z-index: -1;
            background-color: var(--fcolor) !important;
            transform: scale(0);
            transition: all 0.5s ease-in-out;
            transform-origin: right bottom;
            border-bottom-left-radius: 12px;
        }

        .evan-friends .contain:hover .f-avatar {
            transform: scale(1.1);
            box-shadow: 0px 2px 12px rgba(255,255,255,.5);
        }

        @media (max-width: 768px) {
            .evan-friends .contain {
                border-color:#ebeef5;
            }

            .evan-friends .contain:hover {
                border-color: var(--fcolor);
                box-shadow: 0px 0px 20px -5px rgb(158 158 158 / 20%);
            }
        }


    </style>
    <style>
        .nav_login {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 34px;
            /*background-color: var(--theme);*/
            /*margin-right: 10px;*/
            margin-left: 15px;
        }

        .nav_login a {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background-color: #f2f2f2;
            color: #333;
            text-decoration: none;
            font-size: 24px;
            transition: background-color 0.3s, color 0.3s;
        }

        .nav_login .login_before:hover {
            background-color: var(--theme);
            color: #f2f2f2;
        }
        .nav_login img{
            width: 30px;
            height: 30px;
            border-radius: 50%;
            object-fit: cover;
            overflow: hidden;

        }



    </style>
    </th:block>
</html>